<template>
  <div>
  <div class="leftBottom" style="display: flex">
<!--    四个可点击按钮-->
    <el-row class="wp-list">
      <el-button v-for="item in wpList" :key="item.name"
                 :class="{active : active == item.name}"
                 @click="selected(item.name);toggleTab(item.component)">{{item.name}}</el-button>
    </el-row>
  </div>
<!--  // 子组件，显示不同的 tab-->
<!--  // is 特性动态绑定子组件-->
<!--  // keep-alive 将切换出去的组件保留在内存中-->
  <manualTest :is="currentTab" keep-alive></manualTest>
  </div>
</template>


<script>
import manualTest from "@/components/test/manualTest";
import autoTest from "@/components/test/autoTest";
import dailyBuildTest from "@/components/test/dailyBuildTest";
import tortureTest from "@/components/test/tortureTest";
import weekreport from "@/components/test/weekreport";

export default {
  name: 'leftBottom',
  data () {
    return {
      currentTab: 'manualTest',  // currentTab 用于标识当前触发的子组件
      // 四个按钮显示内容与对应组件
      wpList: [{
          name: '手动测试',
          component:'manualTest'
        },
        {
          name: '自动化测试',
          component:'autoTest'
        },
        {
          name: '每日构建',
          component:'dailyBuildTest'
        },
        {
          name: '烤机',
          component:'tortureTest'
        },
        {
          name: '周报生成',
          component:'weekreport'
        },],
      active:'手动测试'
    };
  },
  components: {  // 声明子组件
    manualTest,
    autoTest,
    dailyBuildTest,
    tortureTest,
    weekreport,
    // manualTest:() => import ("@/components/test/manualTest"),
    // autoTest:() => import ("@/components/test/manualTest"),
    // dailyBuildTest:() => import ("@/components/test/manualTest"),
    // tortureTest:() => import ("@/components/test/manualTest"),
  },
  methods: {
    toggleTab: function(tab) {
      this.currentTab = tab;  // tab 为当前触发标签页的组件名
    },
    selected(name){
      this.active = name;
    }
  }
}

</script>

<style lang="scss" scoped>
.leftBottom{
  .tab{
    padding-right: 0.2rem;
    font-size: 0.235rem;
    font-weight: bolder;
    a{
      color: #CCFFFF;
    }
  }
  .active {
    color: #257dff;
  }
  //组件下划线
  .active:after {
    content:'';
    //text-align: center;
    display:block;
    //width:30pt;
    margin-top:0.08rem;
    margin-left: 25%;
    border-bottom:2px solid #257dff;
    position: relative;
    width: 50%;
  }

  .wp-list{
    font-size: 0.235rem;
     color: #CCFFFF;
    font-weight: bolder;
    width: 100%;
    display: flex;
    cursor: pointer;
    //flex-wrap: wrap;
    justify-content: space-around;
  }
}
</style>